import { View, Text, RichText } from "@tarojs/components";
import Taro, { useLoad ,usePageScroll} from "@tarojs/taro";
import "./index.scss";
import { useState } from "react";
import { whRequest } from "@/utils/request";


export default function AgreeAgreement() {
  const [curCont, setCurCont] = useState("");
  const [canClick, setCanClick] = useState(false);
  const [btnTxt, setBtnTxt] = useState("同意");
  const [_windowHeight, _setWindowHeight] = useState(0);
  const [contentList, setContentList] = useState<any[]>([
    {
      name:'我是代缴协议',
      content:'我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议我是代缴协议'
    },
    {
      name:'我是授权协议',
      content:'我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议我是授权协议'
    }
  ]);
  const [contHeight,setContHeight] = useState(0)
  const [curIndex, setCurIndex] = useState(0);

  function initCurData() {
    setCurCont(contentList[0].content);
    Taro.setNavigationBarTitle({
      title: contentList[0].name,
    });
    setTimeout(() => [getContentHeight()], 200);
  }
  function getContentHeight(){
    let query = Taro.createSelectorQuery()
    query
      .select('#cont')
      .boundingClientRect(function (rect:any) {
        
        // 多减去50,这样pagescroll 判断是不是到底部的时候，不用每次都减了
        setContHeight(rect.height - 50)
        
        console.log('getContentHeight rect:',rect)
        const res = Taro.getWindowInfo();
        
        console.log('getWindowInfo res:',res)
        if(rect.height - 50 <= res.windowHeight){
          setCanClick(true)
          setBtnTxt('同意')
        }else{
          setCanClick(false)
          setBtnTxt('请向上滑动阅读到底部')
        }
      })
      .exec()
  }
  

  function getNextAgreement() {
    if (!canClick) {
      return
    }
    // console.log('curIndex:', curIndex)
    // console.log('curIndex:',curIndex)
    if (curIndex < contentList.length - 1) {
      Taro.pageScrollTo({
        scrollTop: 0
      })
      setTimeout(() => {
        setCurIndex(curIndex + 1)
        setCurCont(contentList[curIndex + 1].content)
        setCanClick(false) 
        Taro.setNavigationBarTitle({
          title: contentList[curIndex + 1].name
        })
        getContentHeight()
      }, 200)
    } else {
      // console.log('back')
      Taro.setStorageSync(
        'pages/pureTextAgreement/index/agreeInsuranceAgreement',
        true
      )
      // wx.redirectTo({
      //   url: '/pagesIns/insurance/index'
      // });
      Taro.navigateBack({
        delta: 1
      })
    }
  }

  
  useLoad(() => {
      // 获取当前window高度
    const res = Taro.getWindowInfo();
    console.log('res:',res)
    _setWindowHeight(res.windowHeight);
    initCurData()
  });

  // function judgeIsBottom() {
  //   Taro.createSelectorQuery().select('#mainPage').boundingClientRect(function (rect) {
  //     if (e.scrollTop >= rect.height - 555) {
  //         //已离底部一段距离，下面处理操作
  //     }
  //     if(contHeight)
  // }).exec()
  // }

  usePageScroll((res) => {
    
    if (res.scrollTop + _windowHeight > contHeight) {
      // console.log('滚动到底部了')
      setCanClick(true)
      setBtnTxt('同意')
    }

  })
  return (
    <View className="agreement" id="mainPage">
      <View id='cont' className='cont'>
        {curCont}
      </View>
      <view
        className={["main-bottom-btn", canClick ? "" : "disabled"].join(" ")}
        onClick={getNextAgreement}
      >
        <view className="main-bottom-inner">{btnTxt}</view>
      </view>
    </View>
  );
}
